<script setup lang="ts">
import PageContainer from "~/components/page-container/index.vue"
import {onBeforeUnmount, onMounted, shallowRef} from "vue";
import {generateTitle} from "~/pages/home/index.ts";
const title = shallowRef('')
const columns = [
  {
    title: '运营账号',
    dataIndex: 'account',
    key: 'account' ,
    resizable: true,
    customHeaderCell: () => {
      return {
        style: {
          'text-align': 'center'
        }
      }
    }},
  {
    title: '完成金额',
    dataIndex: 'completeAmount',
    key: 'completeAmount' ,
    resizable: true,
    customHeaderCell: () => {
      return {
        style: {
          'text-align': 'center'
        }
      }
    }},
  {
    title: '日均计划',
    dataIndex: 'planDayAmount',
    key: 'planDayAmount' ,
    resizable: true,
    customHeaderCell: () => {
      return {
        style: {
          'text-align': 'center'
        }
      }
    }},
  {
    title: '完成进度',
    dataIndex: 'operatorKpiPercentage',
    key: 'operatorKpiPercentage' ,
    resizable: true,
    customHeaderCell: () => {
      return {
        style: {
          'text-align': 'center'
        }
      }
    }},
]





onMounted(() => {
  title.value = generateTitle();
})

onBeforeUnmount(() => {
  console.log('关闭前销毁');
})
</script>

<template>
  <PageContainer title="首页">
    <template #content>
      <div class="header">
        <div class="avatar">
          <a-avatar size="large" />
        </div>
        <div class="content">
          <div class="content-title">{{title}}</div>
          <div>IT事业部 CTO</div>
        </div>
      </div>
    </template>

    <a-row mt-24px :gutter="24">
      <a-col :span="8">
        <a-card>
          今日成交单数:
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          今日成交单数:
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          今日成交单数:
        </a-card>
      </a-col>
    </a-row>
    <a-row mt-24px :gutter="24">
      <a-col :span="8">
        <a-card>
          今日成交单数:
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          今日成交单数:
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          今日成交单数:
        </a-card>
      </a-col>
    </a-row>

    <a-card mt-24px title="每日交易概况">
111
    </a-card>
    <a-card mt-24px title="KPI完成情况">
      <a-table :headerCell="{textAlign: 'center'}" :columns="columns"></a-table>
    </a-card>
  </PageContainer>
</template>

<style lang="scss" scoped>
.header{
  display: flex;
  .avatar {
    flex: 0 1 72px;
    & > span {
      display: block;
      width: 72px;
      height: 72px;
      border-radius: 72px;
    }
  }

  .content {
    position: relative;
    top: 4px;
    flex: 1 1 auto;
    margin-left: 24px;
    color: var(--pro-ant-color-text-tertiary);
    line-height: 22px;
    &-title {
      margin-bottom: 12px;
      color:var(--pro-ant-color-text);
      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
    }
  }
}
</style>
